<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>student system 3.0</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div class="container">
        <header>
            <h1>学生管理系统</h1>
        </header>
        <div class="main">
            <section>
                <h2 class="main_menu menu_checked">学生列表</h2>
                <h2 class="main_menu">新增学生</h2>
                <h2 class="main_menu">修改学生</h2>
                <h2 class="main_menu">查询学生</h2>
            </section>
            <div class="main_informationDisplay">
                <div class="main_informationDisplay_checked">
                    <table class="studentsList">
                        <caption>学生列表</caption>
                        <thead>
                            <tr>
                                <th>学号</th>
                                <th>姓名</th>
                                <th>年龄</th>
                                <th>性别</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                    <span id="tips"></span>
                </div>
                <div>
                    <h3>新增学生</h3>
                    <form action="#" id="addForm">
                        <div>
                            <label for="addname">姓名</label>
                            <input type="text" id="addname" class="name">
                        </div>
                        <div>
                            <label for="addage">年龄</label>
                            <input type="text" id="addage" class="age">
                        </div>
                        <div>
                            <span>性别</span>
                            <label for="addmale">男</label>
                            <input type="radio" name="gender" id="addmale" value="男">
                            <label for="addfemale">女</label>
                            <input type="radio" name="gender" id="addfemale" value="女">
                        </div>
                        <input type="button" value="确认新增" id="addBtn">
                    </form>
                </div>
                <div>
                    <h3>修改学生</h3>
                    <form action="#" id="modifyForm">
                        <div>
                            <label for="modifyname">姓名</label>
                            <input type="text" id="modifyname" class="name">
                        </div>
                        <div>
                            <label for="modifyage">年龄</label>
                            <input type="text" id="modifyage" class="age">
                        </div>
                        <div>
                            <span>性别</span>
                            <label for="modifymale">男</label>
                            <input type="radio" name="gender" id="modifymale" value="男">
                            <label for="modifyfemale">女</label>
                            <input type="radio" name="gender" id="modifyfemale" value="女">
                        </div>
                        <input type="button" value="确认修改" id="modifyBtn" disabled>
                    </form>
                </div>
                <div>
                    <h3>查询学生</h3>
                    <form action="#" id="queryForm">
                        <select name="" id="">
                            <option value="name">姓名</option>
                            <option value="age">年龄</option>
                            <option value="gender">性别</option>
                        </select>
                        <input type="text" placeholder="查询内容">
                        <input type="button" value="搜索" id="queryBtn">
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script src="./common.js"></script>
</body>

</html>